<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
	rel="stylesheet" media="screen" />

<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="@{js/admin.js}"></script>

</head>
<body>
<div class="container">	
<div class="row">

<div class="col-md-6">
<div class="panel panel-default" th:fragment="addUserData">
  <div class="panel-heading">
    <h3 class="panel-title">Add User Data</h3>
  </div>
  <div class="panel-body">
    <form action="#" th:action="@{/adduser}" th:object="${userModel}" method="post" class="form-horizontal" id="addUserForm">
		  <div class="form-group">
		    <label for="inputId" class="col-sm-2 control-label">ID</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" id="inputId" placeholder="Id" th:field="*{id}" />
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputName" class="col-sm-2 control-label">Name</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" id="inputName" placeholder="Name" th:field="*{name}" />
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputSalary" class="col-sm-2 control-label">Salary</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" id="inputSalary" placeholder="Salary" th:field="*{salary}" />
		    </div>
		  </div>		  

		  <div class="form-group">
		    <div class="col-sm-offset-2 col-sm-10">
		      <button type="submit" class="btn btn-primary" id="btnAddUser">Add</button>
		    </div>
		  </div>
		</form>
  </div>
</div>
<a href="/users/oracle">Paginated List using Oracle</a> 
<br/>
<a href="/users/mysql">Paginated List using MySQL</a>
</div>

<div class="col-md-6">

<div class="panel panel-default" th:fragment="listUserData" id="listUserData">
  <div class="panel-heading">
    <h3 class="panel-title">List User Data</h3>
  </div>
  <div class="panel-body">
    <div class="table-responsive">
		        <table class="table table-striped">
		            <thead>
		                <tr>
		                    <th>Id</th>
		                    <th>Name</th>
		                    <th>Salary</th>
		                </tr>
		            </thead>
		            <tbody>
		                <tr th:each="user : ${userlist}">
		                    <td th:text="${user.id}">Id</td>
		                    <td th:text="${user.name}">Username</td>
		                    <td th:text="${user.salary}">Name</td>
		                </tr>
		            </tbody>
		        </table>
		       </div>
  </div>
</div>

</div>

</div>
	

	

	
	
	
			<!-- Modal for Add Users -->
		<div class="modal fade" id="add-users-confirmation-modal"
			tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
			<div class="modal-dialog modal-md">
				<div class="modal-content-cust">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h1 class="panel-title">Add User</h1>
							<button type="button" class="close pull-right custom-panel-close"
								data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="panel-body">

							<form action="#" th:action="@{/admin/adduser}" th:object="${userModel}" method="post" id="addUserForm">
								<div class="form-group">
									<div class="row">
										<div class="col-sm-4">
											<label for="inputFirstName">First Name</label> <input
												type="text" class="form-control" id="inputId"
												placeholder="First Name" th:field="*{id}" />
										</div>
										<div class="col-sm-4">
											<label for="inputFirstName">Middle Name</label> <input
												type="text" class="form-control" id="inputName"
												placeholder="First Name" th:field="*{name}" />
										</div>
										<div class="col-sm-4">
											<label for="inputFirstName">Last Name</label> <input
												type="text" class="form-control" id="inputSalary"
												placeholder="First Name" th:field="*{salary}" />
										</div>
									</div>

								</div>

							
							</form>
							The user will be added with <mark>username as email and a random password is generated.</mark>
						</div>
						<div class="panel-footer clearfix">
							<div class="pull-right">
					 			<button type="button" class="btn btn-default" id="btnCancelAddUsers" data-dismiss="modal">Cancel</button>
					 			<button type="button" class="btn btn-primary" id="btnYesAddUsers" data-dismiss="modal">Submit</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

</div>
</body>
</html>